<template>
    <div class="box">
        <van-nav-bar title="全部分类" />
        <van-search @click="$router.push('/search')" shape="round" background="#fff" placeholder="搜索商品" />

        <van-tree-select
        height="100%"
         :items="items"
        @click-nav="btn"
         :main-active-index.sync="active">
            <template  #content>
                <van-grid  :column-num="3" v-if="e === active" >
                    <van-grid-item :icon="item.image.external_url" :text="item.name" v-for="item in list[e].children" :key="item.category_id"/>
                </van-grid>
            </template>
        </van-tree-select>

    </div>
</template>

<script>
import { side } from '@/api/actilce'
export default {
  name: 'ClassificationView',
  data () {
    return {
      active: 0,
      Side: [],
      items: [],
      e: 0,
      list: []

    }
  },
  async created () {
    const res = await side()
    console.log(res.data.list)
    this.Side = res.data.list
    // this.active = res.data.list[this.active].children
    this.list = res.data.list
    this.items = res.data.list.map(item => {
      return { text: item.name }
    })
  },
  methods: {
    btn (e) {
      console.log(e)
      this.e = e
    }
  }

}
</script>

<style lang="less" scoped>
body {
    background: #fff;
}

/deep/ .van-nav-bar__title {
    font-weight: 700;
    font-size: 20px;
}

/deep/ .van-search__content {
    background: #f1f1f2;
}

/deep/.van-field__control {
    text-align: center;
}

/deep/.van-field__left-icon {
    margin-right: 0;
}

/deep/.van-sidebar-item--select::before{
    width: 0;
    height: 0;
}
/deep/.van-sidebar-item--select {
    color: #fa2209;
}
</style>
